<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<body>
		<div id="app">
			<h2>基础用法</h2><br/>
			<template>
			  <el-transfer v-model="value" :data="data"></el-transfer>
			</template>
		</div>
		
		<div id="app2">
			<h2>可搜索</h2><br/>
			<template>
			  <el-transfer
			    filterable
			    :filter-method="filterMethod"
			    filter-placeholder="请输入城市拼音"
			    v-model="value"
			    :data="data">
			  </el-transfer>
			</template>
		</div>
	</body>
	<script>
		var Main = {
		    data() {
		      const generateData = _ => {
		        const data = [];
		        for (let i = 1; i <= 15; i++) {
		          data.push({
		            key: i,
		            label: `备选项 ${ i }`,
		            disabled: i % 4 === 0
		          });
		        }
		        return data;
		      };
		      return {
		        data: generateData(),
		        value: [1, 4]
		      };
		    }
		  };
		  
		  var Main2 = {
		      data() {
		        const generateData = _ => {
		          const data = [];
		          const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
		          const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
		          cities.forEach((city, index) => {
		            data.push({
		              label: city,
		              key: index,
		              pinyin: pinyin[index]
		            });
		          });
		          return data;
		        };
		        return {
		          data: generateData(),
		          value: [],
		          filterMethod(query, item) {
		            return item.pinyin.indexOf(query) > -1;
		          }
		        };
		      }
		    };
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app');
		
		var Ctor2 = Vue.extend(Main2)
		new Ctor2().$mount('#app2');
	</script>
</html>
